

<template>
    <el-skeleton v-if="data.loadingshows" :rows="35" animated />
    <div class="containerFile" v-else>
      <div class="card_box" v-for="item in data.fileList" @click="openFileDialog(item)">
        <span :class="item.membership=='SVIPusers'?'card-span1':(item.membership=='SellingGoods'?'card-span2':'card-span3')"></span>
        <div class="file-card-box">
           <div class="file-card-img">
             <img :src="item.picture"/>
           </div>
           <div class="file-card-body">
             <div >{{item.title}}</div>
             <div >{{item.content}}</div>
          </div>
        </div>
      </div>
    </div>
  <!-- 文件组件-->
  <div v-if="data.openFileDialog" >
    <file-dialog :file-list="data.fileListSet"  @receiveFile="receiveFile"  />
  </div>
</template>

<script setup>

import {selSoftGet} from "../request/request";
import {onMounted, ref,reactive} from "vue";
import LoadingShows from "../components/loadingShows.vue";

const data=ref({
  fileList:[],//文件list
  loadingshows:true,//加载
  openFileDialog:false,
  fileListSet:'',//重置的数据
})

onMounted(()=>{
  selSoftGet().then((res)=>{
    if (res.code==200){
      data.value.fileList=res.data;
      data.value.loadingshows=false;
    }
   // console.log(res)
  })
})


/**
 * @param{{打开组件,并传值}}（修改数据）
 */
const openFileDialog=(e)=>{
  data.value.fileListSet=e
  data.value.openFileDialog=true
}
/**
 * @param{{接收组件传过来的值}}
 */
const receiveFile = (e) => {
  if(e==false){data.value.openFileDialog=false}//销毁组件
  else {
    data.value.openFileDialog=false
  }
}
</script>

<style scoped>
.containerFile {
  display: flex;
  flex-wrap: wrap;
}
.card_box {
  width: 190px;
  height: 230px;
  border-radius: 20px;
  margin: 30px;
  background: linear-gradient(170deg, rgba(243, 237, 237, 0.62) 0%, rgb(161, 127, 255) 100%);
  position: relative;
  box-shadow: 0 15px 30px rgba(161, 127, 255, 0.8);
  cursor: pointer;
  transition: all .3s;
}
.card_box:hover {
  transform: scale(1.02);
}
.card-span1 {
  position: absolute;
  overflow: hidden;
  width: 150px;
  height: 150px;
  top: -10px;
  left: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-span1::before {
  content: '会员专享';
  position: absolute;
  width: 150%;
  height: 40px;
  background-image: linear-gradient(45deg, #ff6547 0%, #ffb144  51%, #ff7053  100%);
  transform: rotate(-45deg) translateY(-20px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 5px 10px rgba(0,0,0,0.23);
}
.card-span1::after {
  content: '';
  position: absolute;
  width: 10px;
  bottom: 0;
  left: 0;
  height: 10px;
  z-index: -1;
  box-shadow: 140px -140px #cc3f47;
  background-image: linear-gradient(45deg, #FF512F 0%, #F09819  51%, #FF512F  100%);
}
.card-span2 {
  position: absolute;
  overflow: hidden;
  width: 150px;
  height: 150px;
  top: -10px;
  left: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-span2::before {
  content: '单独售卖';
  position: absolute;
  width: 150%;
  height: 40px;
  background-image: linear-gradient(45deg, #0299f6 0%, #42b0ef 51%, #42b0ef 100%);
  transform: rotate(-45deg) translateY(-20px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 5px 10px rgba(0,0,0,0.23);
}
.card-span2::after {
  content: '';
  position: absolute;
  width: 10px;
  bottom: 0;
  left: 0;
  height: 10px;
  z-index: -1;
  box-shadow: 140px -140px #1e8af8;
  background-image: linear-gradient(45deg, #0299f6 0%, #42b0ef 51%, #0299f6 100%);
}
.card-span3 {
  position: absolute;
  overflow: hidden;
  width: 150px;
  height: 150px;
  top: -10px;
  left: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-span3::before {
  content: '免费下载';
  position: absolute;
  width: 150%;
  height: 40px;
  background-image: linear-gradient(45deg, #09d714 0%, #66ff44 51%, #09d714  100%);
  transform: rotate(-45deg) translateY(-20px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 5px 10px rgba(0,0,0,0.23);
}
.card-span3::after {
  content: '';
  position: absolute;
  width: 10px;
  bottom: 0;
  left: 0;
  height: 10px;
  z-index: -1;
  box-shadow: 140px -140px #01ad09;
  background-image: linear-gradient(45deg, #09d714 0%, #61f019 51%, #09d714  100%);
}
.file-card-box{
  display: flex;
  width: 190px;
  height: 230px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.file-card-img{
  width: 170px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-card-img img{
  width: 110px;
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
}
.file-card-body{
  width: 170px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.file-card-body div:nth-child(1){
  width: 160px;
  height: 20px;
  display: flex;
  align-items: center;justify-content: center;
  color: white;
}
.file-card-body div:nth-child(2){
  margin-top: 10px;
  font-size: 10px;
  color: white;
  width: 160px;
  height: 70px;

}
</style>
